<!--
  Created by IntelliJ IDEA.
  User: Dai
  Date: 2018/4/11
  Time: 10:51
  Remark: 工程配置 -  对象管理 -  项目管理 - 编辑设备树
  To change this template use File | Settings | File Templates.
-->
<style>
    .ztree {
        padding: 0;
    }

    .ztree li a {
        height: 30px !important;
        vertical-align: middle;
        line-height: 30px;
    }

    .ztree li > a {
        width: 100%;
    }

    .ztree li span.node_name {
        padding-left: 12px;
    }

    .ztree li ul {
        padding-left: 0px
    }
    .ztree li ul.line {
        background: none;
    }
    .ztree div.diy a {
        display: inline;
    }
    .ztree div.diy {
        border-bottom: 1px dotted #eeeeee;
        border-left: 1px solid #eeeeee;
        text-align: center;
        color: #6c6c6c;
        font-size: 12px;
        overflow: hidden;
        height: 30px;
    }

    span.switch.level1 {
        margin-left: 10px !important;
    }

    span.switch.level2 {
        margin-left: 20px !important;
    }

    span.switch.level3 {
        margin-left: 30px !important;
    }
</style>
<!--标题栏-->
<div class="modal-header" xmlns:th="http://www.w3.org/1999/xhtml">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">编辑控制指令</h4>
</div>
<!--表格栏-->
<div class="modal-body" style="padding: 0;">
    <div style="width: 100%;overflow:auto; height: 500px">
        <div class="col-xs-12" style="padding: 0">
            <div class="tree-title col-xs-3">设备树</div>
            <div class="col-xs-9" style="padding: 0">
                <div class="tree-title col-sm-3">设备类型</div>
                <div class="tree-title col-sm-3">通信类型</div>
                <div class="tree-title col-sm-3">通信配置文件</div>
                <div class="tree-title col-sm-3">操作</div>
            </div>
            <div class="zTreeDemoBackground left col-xs-12" style="padding: 0">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
        <!--<div class="col-sm-9" style="padding: 0" id="tree_configure">-->
        <!--<table id="tree_configure_table" class="table"></table>-->
        <!--</div>-->
    </div>
    <input type="hidden" id="tree_id" th:value="${id}">
    <input type="hidden" id="list" th:value="${list}">
</div>
<!--ztree相关方法 未完成部分见TODO注释-->
<script th:inline="javascript">
    var setting = {
        view: {
            showIcon: false,        // 是否显示节点的图标
            addDiyDom: addDiyDom
        },
        data: {
            simpleData: {
                enable: true,       // 使用简单数据模式
                idKey: "id",        // 节点数据中保存唯一标识的属性名称
                pIdKey: "pId",      // 节点数据中保存其父节点唯一标识的属性名称
                rootPId: ""         // 用于修正根节点父节点数据 默认值：null
            }
        },
        callback: {
            onRename: function (event, treeId, treeNode) {//重命名之后触发的事件
                var project_id = $("#tree_id").val();
                $.post(
                    '/project/objectManage/save_equipment_name',
                    {parent_id: treeNode.pId, project_id: project_id, name: treeNode.name, type: treeNode.type, id: treeNode.id},
                    function (result) {
                        console.log(result);
                        // var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                        // treeObj.destory();
                        var treeObj = $.fn.zTree.init($("#treeDemo"), setting, result);
                        treeObj.expandAll(true);    // 设置默认展开
                    }
                )
            },
            onRemove: function (event, treeId, treeNode) {//删除节点之后的动作
                console.log(treeNode.id + "  删除");
                $.post(
                    '/project/objectManage/delete_equipment',
                    {id: treeNode.id},
                    function (result) {
                        console.log(result);
                        var treeObj = $.fn.zTree.init($("#treeDemo"), setting, result);
                        treeObj.expandAll(true);    // 设置默认展开
                    }
                )
            }
        }
    };
    var zNodes = [[${ztreeDtos}]];

    /**
     * 新增表格树
     */
    function addDiyDom(treeId, treeNode) {
        if (treeNode.type > 4) return;
        var aObj = $("#" + treeNode.tId + "_a");
        var _switch = $("#" + treeNode.tId + "_switch").remove();
        var _ico = $("#" + treeNode.tId + "_ico").remove();
        var _span = $("#" + treeNode.tId + "_span").remove();
        aObj.append(_switch);
        aObj.append(_ico);
        aObj.append(_span);
        var editStr;
        switch (treeNode.type) {
            case "1":
                editStr =
                    "<span class='demoIcon' id='diyBtn_" + treeNode.id + "' title='" + treeNode.name + "' onfocus='this.blur();'>" +
                    "<span class='button delete' title='删除'></span>" +
                    "<span class='button rename' title='重命名'></span>" +
                    "</span>";
                editStr +=
                    "<div id='diyTable_" + treeNode.id + "' class='col-sm-9' style='float: right'>" +
                    "<div class='diy col-sm-3'>变流器</div>\n" +
                    "<div class='diy col-sm-3'>" + treeNode.communication + "</div>\n" +
                    "<div class='diy col-sm-3'>" + treeNode.messageName + "</div>\n" +
                    "<div class='diy col-sm-3'>" +
                    "   <a data-toggle='modal' href='/project/objectManage/project_edit_configure?id=" + treeNode.id + "' data-target='#modal2'>编辑</a>" +
                    "</div>" +
                    "</div>";
                break;
            case "2":
                editStr =
                    "<span class='demoIcon' id='diyBtn_" + treeNode.id + "' title='" + treeNode.name + "' onfocus='this.blur();'>" +
                    "<span class='button add_group' title='新增模组'></span>" +
                    "<span class='button delete' title='删除'></span>" +
                    "<span class='button rename' title='重命名'></span>" +
                    "<span class='button add_list' title='批量生成模组'></span>" +
                    "</span>";
                editStr +=
                    "<div id='diyTable_" + treeNode.id + "' class='col-sm-9' style='float: right'>" +
                    "<div class='diy col-sm-3'>电池包</div>\n" +
                    "<div class='diy col-sm-3'>" + treeNode.communication + "</div>\n" +
                    "<div class='diy col-sm-3'>" + treeNode.messageName + "</div>\n" +
                    "<div class='diy col-sm-3'>" +
                    "   <a data-toggle='modal' href='/project/objectManage/project_edit_configure?id=" + treeNode.id + "' data-target='#modal2'>编辑</a>" +
                    "</div>" +
                    "</div>";
                break;
            case "3":
                editStr =
                    "<span class='demoIcon' id='diyBtn_" + treeNode.id + "' title='" + treeNode.name + "' onfocus='this.blur();'>" +
                    "<span class='button add_one' title='新增模组'></span>" +
                    "<span class='button delete' title='删除'></span>" +
                    "<span class='button rename' title='重命名'></span>" +
                    "</span>";
                editStr +=
                    "<div id='diyTable_" + treeNode.id + "' class='col-sm-9' style='float: right'>" +
                    "<div class='diy col-sm-3'>&nbsp;</div>\n" +
                    "<div class='diy col-sm-3'>&nbsp;</div>\n" +
                    "<div class='diy col-sm-3'>&nbsp;</div>\n" +
                    "<div class='diy col-sm-3'>&nbsp;</div>" +
                    "</div>";
                break;
            case "4":
                editStr =
                    "<span class='demoIcon' id='diyBtn_" + treeNode.id + "' title='" + treeNode.name + "' onfocus='this.blur();'>" +
                    "<span class='button delete' title='删除'></span>" +
                    "<span class='button rename' title='重命名'></span>" +
                    "</span>";
                editStr +=
                    "<div id='diyTable_" + treeNode.id + "' class='col-sm-9' style='float: right'>" +
                    "<div class='diy col-sm-3'>&nbsp;</div>\n" +
                    "<div class='diy col-sm-3'>&nbsp;</div>\n" +
                    "<div class='diy col-sm-3'>&nbsp;</div>\n" +
                    "<div class='diy col-sm-3'>&nbsp;</div>" +
                    "</div>";
                break;
            default:
                editStr =
                    "<span class='demoIcon' id='diyBtn_" + treeNode.id + "' title='" + treeNode.name + "' onfocus='this.blur();'>" +
                    "<span class='button add_pcs' title='新增变流器'></span>" +
                    "<span class='button add_bms' title='新增电池包'></span>" +
                    "<span class='button add_list' title='批量生成电池包和变流器' data-toggle='modal' href='/project/objectManage/project_add_list' data-target='#modal2'></span>" +
                    "<span class='button export' title='导出树结构'><a style='width: 16px; height: 16px'  href='/project/objectManage/export_tree?id=" + $("#tree_id").val() + "'></a></span>" +
                    "<span class='button import' title='导入树结构'></span>" +
                    "</span>";
                editStr +=
                    "<div id='diyTable_" + treeNode.id + "' class='col-sm-9' style='float: right'>" +
                    "<div class='diy col-sm-3'>&nbsp;</div>\n" +
                    "<div class='diy col-sm-3'>&nbsp;</div>\n" +
                    "<div class='diy col-sm-3'>&nbsp;</div>\n" +
                    "<div class='diy col-sm-3'>" +
                    "   <a data-toggle='modal' href='/project/objectManage/project_edit_list?id=" + treeNode.id + "' data-target='#modal3'>批量编辑</a>" +
                    "</div>" +
                    "</div>";
                break;
        }
        aObj.append(editStr);
        var btn = $("#diyBtn_" + treeNode.id + " span");
        if (btn) btn.bind("click", function () {
            $(this).closest("a").click();   // 选中对应的a标签
            choose_function($(this));
        });
    }

    /**
     * 根据class选择按钮对应的方法
     * @param span
     */
    function choose_function(span) {
        var span_class = $(span).attr("class");
        if (span_class.indexOf("add_list") > 0) {
            // 这边直接显示弹出框的，不做任何操作
        } else if (span_class.indexOf("add_") > 0) {
            add(span);
        } else if (span_class.indexOf("rename") > 0) {
            edit();
        } else if (span_class.indexOf("delete") > 0) {
            remove();
        } else if (span_class.indexOf("import") > 0) {
            //TODO 这边还有导入和导出没有做
            console.log("import" + span_class);
            import_tree();
        }
    }

    var newCount = 1;

    /**
     * 添加方法 e是传入的span
     * @param e
     */
    function add(e) {
        var span_class = e.attr("class");
        var type;
        if (span_class.indexOf("pcs") > 0) {
            type = 1;
        } else if (span_class.indexOf("bms") > 0) {
            type = 2;
        } else if (span_class.indexOf("group") > 0) {
            type = 3;
        } else if (span_class.indexOf("one") > 0) {
            type = 4;
        }
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            isParent = e.data.isParent,
            nodes = zTree.getSelectedNodes(),
            treeNode = nodes[0];
        if (treeNode) {
            treeNode = zTree.addNodes(treeNode, {
                id: (100 + newCount),
                pId: treeNode.id,
                isParent: isParent,
                name: "new node" + (newCount++),
                type: type
            });
        }
        if (treeNode) {
            zTree.editName(treeNode[0]);
        } else {
            alert("叶子节点被锁定，无法增加子节点");
        }
    };

    /**
     * 修改名称
     */
    function edit() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            nodes = zTree.getSelectedNodes(),
            treeNode = nodes[0];
        if (nodes.length == 0) {
            alert("请先选择一个节点");
            return;
        }
        zTree.editName(treeNode);
    };

    /**
     * 移除节点
     * @param e
     */
    function remove(e) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            nodes = zTree.getSelectedNodes(),
            treeNode = nodes[0];
        if (nodes.length == 0) {
            alert("请先选择一个节点");
            return;
        }
        zTree.removeNode(treeNode, true);
    };

    /**
     * 导入树结构
     */
    function import_tree() {
        //TODO 还没有想好怎么做
    }

    $("#addLeaf").bind("click", {isParent: false}, add);
    $("#edit").bind("click", edit);
    $("#remove").bind("click", remove);

    $(document).ready(function () {
        var treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        treeObj.expandAll(true);    // 设置默认展开
    });
</script>
